// 1.WOW动画初始
// wow = new WOW({
//     boxClass: 'wow', // default
//     animateClass: 'animate__animated', // default
//     offset: 0, // default
//     mobile: true, // default
//     live: true // default
// })
// wow.init();
const liAll = document.getElementsByClassName('x');
const spanAll = document.getElementsByClassName('y');
const ulObj = document.querySelector('.web>ul');
const startController = document.querySelector('.startController');
let randNum;
let Info = [
    { word: '苹果13' },
    { word: '诺基亚' },
    { word: '菠萝手机' },
    { word: '大哥大' },
    { word: '8848' },
    { word: '小灵通' },
]
render();
let flag = true;

function render() {
    let cont = '';
    Info.forEach((item, index) => {
        cont += `<li class="x">
        <span class="y">${item.word}</span>
        </li>`;
    });
    ulObj.innerHTML = cont;
    let goodNum = liAll.length;
    // 每个li的旋转角度
    let rotateDeg = rotate(goodNum);
    // 每个li的斜切角度
    let skewDeg = 90 - rotateDeg;
    [...liAll].forEach((item, index) => {
        item.style.width = '20vw';
        item.style.height = '20vw';
        item.style.transform = `rotate(${rotateDeg * index}deg) skew(${skewDeg}deg)`
    });

    [...spanAll].forEach(item => {
        item.style.transform = `translateY(50%) rotate(-45deg)`
    });
    // 初始状态归位

}

// 点击“开始抽奖”
startController.addEventListener('click', item => {
    if (flag) {
        flag = false;
        // 动画归位
        ulObj.style.transition = 'none';
        ulObj.style.transform = `rotate(0deg)`
        getComputedStyle(ulObj).transition;

        ulObj.style.transition = '2s transform cubic-bezier(.56, -0.02, .35, .99)'
            // 设置旋转圈数
        const turnNums = 10;
        // 随机位置停下
        const liCount = document.querySelector('.web>ul').childElementCount;

        randNum = parseInt(Math.random() * liCount);
        console.log(randNum);
        ulObj.style.transform = `rotate(${turnNums * 360 - randNum*rotate(liCount)}deg)`
    }

})

// 动画结束后弹窗
ulObj.addEventListener('transitionend', () => {
        if (randNum == 5) {
            alert('恭喜获得 ' + Info[0].word);
        } else {
            alert('恭喜获得 ' + Info[1 + randNum].word);

        }
        flag = true
            // ulObj.style.transform
    })
    // 计算每个li旋转角度
function rotate(goodNum) {
    return 360 / goodNum
}